<template>
  <div style="padding: 10px">
    <div style="padding-bottom: 10px">
      <d-button @click="setSelect">选中第一行</d-button>
      <d-button @click="clearSelect">清空选中</d-button>
    </div>
    <d-table
      ref="tableCheckBoxRef"
      :data="tableData"
      :columns="columns"
      highlight-current-row
      :showPagination="false"
      @selection-change="handleSelectChange"></d-table>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'

  const tableData = [
    { date: '2016-05-03', name: 'Tom1', address: 'No. 189, Grove St, Los Angeles', id: 1 },
    { date: '2016-05-02', name: 'Tom2', address: 'No. 189, Grove St, Los Angeles', id: 2 },
    { date: '2016-05-04', name: 'Tom3', address: 'No. 189, Grove St, Los Angeles', id: 3 }
  ]
  //   禁选项
  const selectable = (row: any) => ![2].includes(row.id)
  const columns = [
    { label: '多选', cType: 'checkbox', width: '90', selectable: selectable },
    { label: '日期', prop: 'date', width: 120 },
    { label: '姓名', prop: 'name' },
    { label: 'id', prop: 'id' }
  ]
  const handleSelectChange = (val: any) => {
    ElMessage.success(`选中的行数据为：${JSON.stringify(val)}`)
  }

  const tableCheckBoxRef = ref()
  const setSelect = () => {
    tableCheckBoxRef.value?.getTableExpose().toggleRowSelection(tableData[0], true)
  }
  const clearSelect = () => {
    tableCheckBoxRef.value?.getTableExpose().clearSelection()
  }
</script>
